<template>
	<!--新增对话框-->
	<el-dialog
		:title="editForm.id ? '编辑' : '新增'"
		:visible.sync="dialogVisible"
		width="1080px"
		:before-close="handleClose"
    top="5vh"
	>
  <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="140px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="时间" prop="date">
          <el-date-picker
            v-model="editForm.date"
            type="date"
            value-format="yyyy.MM"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="合同时间" prop="contracttime">
          <el-date-picker
            v-model="editForm.contracttime" 
            type="date"
            value-format="yyyy.MM"
            placeholder="选择合同时间">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="交付日期" prop="deliverydate">
          <el-date-picker
            v-model="editForm.deliverydate"
            type="date" 
            value-format="yyyy.MM"
            placeholder="选择交付日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="船名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船型" prop="shiptype">
          <el-input v-model="editForm.shiptype"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船型大类" prop="type">
          <el-input v-model="editForm.type"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="载重吨" prop="capacityton">
          <el-input-number v-model="editForm.capacityton" :precision="2"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="货舱容积(cum)" prop="cargoholdcapacity">
          <el-input v-model="editForm.cargoholdcapacity" ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="修正总吨" prop="correctton">
          <el-input-number v-model="editForm.correctton" :precision="2"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="主机设计公司" prop="hostdesigncompany">
          <el-input v-model="editForm.hostdesigncompany"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="主机燃料" prop="mainenginefuel">
          <el-input v-model="editForm.mainenginefuel"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="运营方" prop="operators">
          <el-input v-model="editForm.operators"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="造船集团" prop="shipbuildinggroup">
          <el-input v-model="editForm.shipbuildinggroup"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="造船集团国家" prop="shipbuildinggroupcountry">
          <el-input v-model="editForm.shipbuildinggroupcountry"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船东集团" prop="shipgroup">
          <el-input v-model="editForm.shipgroup"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="船东集团国家" prop="shipgroupcountry">
          <el-input v-model="editForm.shipgroupcountry"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船东" prop="shipowner">
          <el-input v-model="editForm.shipowner"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船东国家" prop="shipownercountry">
          <el-input v-model="editForm.shipownercountry"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="船东集团洲际" prop="shippinggroup">
          <el-input v-model="editForm.shippinggroup"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船厂" prop="shipyard">
          <el-input v-model="editForm.shipyard"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船厂国家" prop="shipyardcountry">
          <el-input v-model="editForm.shipyardcountry"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="交付年份" prop="deliveryyear">
          <el-input-number 
            v-model="editForm.deliveryyear"
            :precision="0"
            :min="1900"
            :max="2100"
            placeholder="请输入交付年份">
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="细分船型" prop="subclass">
          <el-input v-model="editForm.subclass"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="TEU" prop="teu">
          <el-input-number v-model="editForm.teu" :precision="0"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="总吨" prop="ton">
          <el-input-number v-model="editForm.ton" :precision="2"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="resetForm('editForm')">取 消</el-button>
			<el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {formatServerDate} from '@/utils/date';
import { isNumber } from '@/utils/validate';
export default {
	name: 'AddUpdateShipType',
	components: {},
	data() {
		return {
			editForm: {},
			loading: false,
			dialogVisible: false,
			editFormRules: {
        date: [{ required: true, message: '请选择时间', trigger: 'blur' }],
        name: [{ required: true, message: '请输入船名', trigger: 'blur' }],
        shiptype: [{ required: true, message: '请输入船型', trigger: 'blur' }],
        type: [{ required: true, message: '请输入船型大类', trigger: 'blur' }],
			},
		};
	},
	mounted() {
		// this.getFarmList('');
	},

	methods: {
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
			this.editForm = {};
		},
		handleClose() {
			this.resetForm('editForm');
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					const {date, ...rest} = this.editForm;
					this.$axios.get('/admin/boat/ship/File/' + (this.editForm.id ? 'edit' : 'edit'), 
						{
							params: {
								...rest,
							},
						}).then((res) => {
							this.$message({
								showClose: true,
								message: '恭喜你，操作成功',
								type: 'success',
								onClose: () => {
									this.$emit('refreshDataList');
								},
							});
							this.dialogVisible = false;
							this.resetForm(formName);
						});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		checkIsDisabledDate(date){
			console.log(date);
			return true;
		},
		init(id) {
			this.dialogVisible = true;
			if (id != null && id != '' && id > 0) {
				this.$axios.get('/admin/boat/ship/File/detail?id=' + id).then((res) => {
					const {result = {}} = res;
					const { id, date, ...rest} = result;
					this.editForm = {
						id: id,
						date,
						...rest,
					};
				});
			}
		},
	},
};
</script>

<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
